{% extends "_base.html" %}
{% block title %}注册页面{% endblock %}
{% block script %}
<script type="text/javascript" src="/static/script/Validate.js"></script>
<script>
    $(function(){
        // 检查用户名是否存在按钮
        $("#form-check-exist").click(
        function(event) {
            $.ajax({
                    type: "POST",
                    url: "/passport/checkuser",
                    data: {"username": $("#form-username").val()},
                    beforeSend: function() {
                        if( !check_username($("#form-username").val()) ){
                            $("#dialog p").text("该用户名不合法，请重新输入。");
                            return false;
                        }
                        $("#form-username").removeClass(inval_class);
                        $("#form-username").removeClass(val_class);
                        $("#form-check-exist").hide();
                        $("#form-checking").show();
                        $("#dialog p").text("发送失败");
                    }
                }).done(function(data) {
                    result = data['result'];
                    switch(result){
                        case 'ok':
                            $("#dialog p").text("恭喜，该用户名能用。");
                            $("#form-username").addClass(val_class);
                            break;
                        case 'existed':
                            $("#dialog p").text("该用户名已存在，请重新输入。");
                            $("#form-username").addClass(inval_class);
                            break;
                        case 'invalidate':
                            $("#dialog p").text("该用户名不合法，请重新输入。");
                            $("#form-username").addClass(inval_class);
                            break;
                        default:
                            $("#dialog p").text("未知的错误。");
                            $("#form-username").addClass(inval_class);
                    }
                    $("#dialog").dialog("open");
                }).fail(function() {
                    $("#dialog").dialog("open");
                    $("#form-username").addClass(inval_class);
                }).always(function() {
                    $("#form-checking").hide();
                    $("#form-check-exist").show();
                });
            }
        );
        $("#form-checking").hide();

        // 日期选择器
        $("#form-birthday").datepicker({
            defaultDate: '1985-01-01',
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            onSelect: function(){
                $("#form-birthday").addClass(val_class);
            }
        });

        // 表单检查项
        form_list = {
            "#form-username" : check_username,
            "#form-passwd" : check_passwd,
            "#form-passwd_confirm" : check_passwd_confirm,
            "#form-realname" : check_realname,
            "#form-birthday" : check_birthday,
            "#form-mobile" : check_mobile,
            "#form-postcode" : check_postcode,
            "#form-address" : check_address
        };

        // 提交按钮
        $( "#form-submit" ).button().click(function(){
            res = check_form(form_list);
            if( !res ){
                $("#dialog p").text("您有未填写完整的选项。");
                $("#dialog").dialog("open");
                return false;
            }
        });

        // 表单检查
        check_by_dict(form_list);
    });
</script>
{% endblock %}
{% block content %}
<form id="normal-form" action="/passport/regproc" method="post">
    <div class="input-row">
        <label class="input-label" for="username">用户名 *</label>
        <input class="input-text" type="text" id="form-username" name="username" />
        <span class="ui-icon ui-icon-help" id="form-check-exist" title="检查用户名是否可用"></span>
        <span class="ui-icon ui-icon-clock" id="form-checking" title="正在检查"></span>
    </div>
    <div class="notice-row">
        <label class="notice-label">用户名为小写字母和数字组合（字母开头），长度6-20之间</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="passwd">密码 *</label>
        <input class="input-text" type="password" id="form-passwd" name="passwd" />
    </div>
    <div class="notice-row">
        <label class="notice-label">密码不能为中文，长度6-20之间</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="passwd_confirm">确认密码 *</label>
        <input class="input-text" type="password" id="form-passwd_confirm" name="passwd_confirm" />
    </div>
    <div class="notice-row">
        <label class="notice-label">重复输入密码确认</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="realname">真实姓名 *</label>
        <input class="input-text" type="text" id="form-realname" name="realname" />
    </div>
    <div class="notice-row">
        <label class="notice-label">真实姓名为中英文和空格组合，长度4-20之间</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="birthday">生日 *</label>
        <input class="input-text" type="text" id="form-birthday" name="birthday" />
    </div>
    <div class="notice-row">
        <label class="notice-label">点击上方进行日期选择</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="mobile">手机 *</label>
        <input class="input-text" type="text" id="form-mobile" name="mobile" />
    </div>
    <div class="notice-row">
        <label class="notice-label">请输入你常用的手机号码</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="postcode">邮编 *</label>
        <input class="input-text" type="text" id="form-postcode" name="postcode" />
    </div>
    <div class="notice-row">
        <label class="notice-label">请输入所在地的邮编号码</label>
    </div>
    <div class="input-row">
        <label class="input-label" for="address">地址 *</label>
        <input class="input-text input-text-long" type="text" id="form-address" name="address" />
    </div>
    <div class="notice-row">
        <label class="notice-label">请输入所在地的具体地址，长度20-100之间</label>
    </div>
    <div class="submit-row">
        <input id='form-submit' type="submit" value="注册" />
    </div>
</form>
{% endblock %}
